<template>
  <div class="sales-performance-page">
    <el-card>
      <el-form :inline="true" label-width="100px" class="filter-form">
        <!-- 签订时间范围 -->
        <el-form-item label="开始日期">
          <el-date-picker
              v-model="filter.startDate"
              type="date"
              placeholder="选择开始日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
              v-model="filter.endDate"
              type="date"
              placeholder="选择结束日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" @click="queryPerformance">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="mt-20">
      <div slot="header">
        <span>总销售额</span>
        <span class="ml-10">{{ totalSales }}</span>
      </div>
    </el-card>
    <!-- 销售业绩统计 -->
    <el-card class="mt-20">
      <div slot="header">
        <span>销售业绩统计</span>
      </div>
      <el-table :data="salesPerformance" border style="width: 100%">
        <el-table-column prop="contractId" label="合同编号" width="120"/>
        <el-table-column prop="cusName" label="客户名称"/>
        <el-table-column prop="contractAmount" label="合同金额"/>
        <el-table-column prop="executedAmount" label="已执行金额"/>
        <el-table-column prop="contractStatus" label="执行状态"/>
        <!--        <el-table-column label="操作" width="120">-->
        <!--          <template #default="scope">-->
        <!--            <el-button type="text" size="small" @click="viewContract(scope.row)">查看详情</el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {getTurnoverByEmpIdService} from "@/api/turnover.js";
import {userLoginStore} from "@/stores/modules/userLogin.js";
import {ElMessageBox} from "element-plus";

const loginStore = userLoginStore();
const filter = ref({
  startDate: '',
  endDate: '',
});
const totalSales = ref(0);
const salesPerformance = ref([]);

// 查询销售业绩
const queryPerformance = () => {
  getTurnoverByEmpIdService(loginStore.id, filter.value.startDate, filter.value.endDate).then((response) => {
    if (response.status === 200) {
      salesPerformance.value = response.data.data.contractsTurnovers;
      totalSales.value = response.data.data.total;
    } else {
      ElMessageBox.alert('获取销售业绩失败,服务器错误', '错误');
    }
  });
};

// 重置查询条件
const resetFilter = () => {
  filter.value.startDate = '';
  filter.value.endDate = '';
  salesPerformance.value = [];
  totalSales.value = 0;
};

// 查看合同详情
// const viewContract = (row) => {
//   console.log('查看合同详情', row);
//   // 可以跳转到合同详情页面，或打开弹窗显示更多信息
// };


</script>

<style scoped>
.sales-performance-page {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}
</style>
